.label {
	align-items: center;
	color: var(--color-gray-500);
	column-gap: var(--size-xSmall);
	display: flex;
	line-height: normal;
	transition: color 0.2s ease-in;

	&.checked {
		color: var(--text-primary);

		&.red {
			color: var(--color-red);
		}
	}

	&.spaceBetween {
		display: flex;
		justify-content: space-between;
	}

	&.noMarginAroundSwitch {
		margin: 0;
	}

	&.setMarginForAnimation {
		/* The animation for toggling the switch takes up extra space */
		margin: 6px;
	}
}

.switchStyles {
	background: var(--color-gray-400);

	&:global(.ant-switch-checked) {
		background: #744ed4;

		&.red {
			background: var(--color-red);
		}
	}
}
